<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryRef"
      :inline="true"
      v-show="showSearch"
      label-width="90px"
    >
      <el-form-item label="工厂" prop="factory">
        <el-select
          v-model="queryParams.factory"
          placeholder="请选择"
          style="width: 240px"
          clearable
          filterable
          @change="handleSearchListChange('factory')"
        >
          <el-option
            v-for="(item, index) in factoryOptions"
            :key="index"
            :label="item.deptName"
            :value="item.deptCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工段名称" prop="workshopCode">
        <el-select
          v-model="queryParams.workshopCode"
          placeholder="请选择"
          clearable
          filterable
          style="width: 240px"
          @change="handleSearchListChange('workshopCode')"
        >
          <el-option
            v-for="(item, index) in workshopOptions"
            :key="index"
            :label="item.deptName"
            :value="item.deptCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="产线名称" prop="productLine">
        <el-select
          v-model="queryParams.productLine"
          placeholder="请选择"
          style="width: 240px"
          clearable
          filterable
          @change="handleSearchListChange('productLine')"
        >
          <el-option
            v-for="(item, index) in lineOptions"
            :key="index"
            :label="item.deptName"
            :value="item.deptCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工艺段名称" prop="sectionCode">
        <el-select
          v-model="queryParams.sectionCode"
          placeholder="请选择"
          style="width: 240px"
          clearable
          filterable
          @change="handleSearchListChange('sectionCode')"
        >
          <el-option
            v-for="(item, index) in processOptions"
            :key="index"
            :label="item.deptName"
            :value="item.deptCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单编号" prop="orderCode">
        <el-input
          v-model="queryParams.orderCode"
          placeholder="请输入订单编号"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="产品名称" prop="prodName">
        <el-input
          v-model="queryParams.prodName"
          placeholder="请输入产品名称"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="时间段" prop="date">
        <el-date-picker
          v-model="queryParams.date"
          style="width: 240px"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
          v-model="queryParams.status"
          placeholder="请选择状态"
          clearable
          filterable
          style="width: 240px"
        >
          <el-option
            v-for="(item, index) in change_shifts_status"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
        <el-button
          type="primary"
          icon="Edit"
          @click="handleSuccession"
          v-hasPermi="['prod:changeShift:succession']"
        >
          接班
        </el-button>
      </el-form-item>
    </el-form>

    <el-table
      v-loading="loading"
      :data="typeList"
      border
      style="width: 100%"
      max-height="550px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column label="生产日期" prop="prodDate" />
      <el-table-column label="班次" prop="scheduleName" />
      <el-table-column label="班组" prop="workGroupName" :show-overflow-tooltip="true" width="140">
        <template #default="scope">
          <el-link type="primary" v-if="scope.row.status == 1" @click="handleDetailing(scope.row)">
            {{ scope.row.workGroupName }}
          </el-link>
          <el-link
            type="primary"
            v-else-if="scope.row.status == 2"
            @click="handleDetailhas(scope.row)"
          >
            {{ scope.row.workGroupName }}
          </el-link>
        </template>
      </el-table-column>
      <el-table-column label="班长" prop="monitorName" />
      <el-table-column label="工厂" prop="factoryName" />
      <el-table-column label="工段" prop="workshopName" />
      <el-table-column label="产线" prop="productLineName" />
      <el-table-column label="工艺段" prop="sectionName" />
      <el-table-column label="接班时间" prop="createTime">
        <template #default="scope">
          <span>{{ scope.row.createTime || "-" }}</span>
        </template>
      </el-table-column>
      <el-table-column label="交班时间" prop="updateTime">
        <template #default="scope">
          <span v-if="scope.row.status == 2">{{ scope.row.updateTime || "-" }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column label="订单编号" prop="orderCode" />
      <el-table-column label="产品名称" prop="prodName" />
      <el-table-column label="当班产量" prop="onDutyOutput" />
      <el-table-column label="单位" prop="unit" />
      <el-table-column label="状态" prop="status">
        <template #default="scope">
          <dict-tag :options="change_shifts_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        width="120"
        fixed="right"
        class-name="small-padding fixed-width"
      >
        <template #default="scope">
          <el-button
            link
            type="primary"
            icon="Edit"
            v-hasPermi="['prod:changeShift:edit']"
            @click="handleUpdate(scope.row)"
            v-if="scope.row.status == 1"
          >
            编辑
          </el-button>
          <el-button
            link
            type="primary"
            icon="Edit"
            v-hasPermi="['prod:changeShift:handover']"
            @click="handleHandover(scope.row)"
            v-if="scope.row.status == 1"
          >
            交班
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="changeShifts">
import { listChangeShifts } from "@/api/productionMgt/changeShifts";
import { depeIdSelectList } from "@/api/system/dept";
import DetailData from "./data";
import SuccessionData from "./succession";
import HandoverData from "./handover";
import { ref, toRefs, reactive, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();

const typeList = ref([]);
const { change_shifts_status } = proxy.useDict("change_shifts_status");
const loading = ref(true);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const total = ref(0);
const dateRange = ref([]);
var factoryOptions = ref([]);
var workshopOptions = ref([]);
var lineOptions = ref([]);
var processOptions = ref([]);

const data = reactive({
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    status: "1",
    name: undefined,
  },
});

const { queryParams } = toRefs(data);
/** 查询设备类型列表 */
function getList() {
  loading.value = true;
  let newForm = JSON.parse(JSON.stringify(queryParams.value));
  if (queryParams.value?.date?.length) {
    newForm.startTime4CarryOn = queryParams.value.date[0];
    newForm.endTime4CarryOn = queryParams.value.date[1];
    delete newForm.date;
  }
  listChangeShifts(proxy.addDateRange(newForm)).then((response) => {
    typeList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}

function getFactorys() {
  // getFactoryTree(query).then((res) => {
  //   factoryOptions.value = res.data;
  // });
  depeIdSelectList({
    deptType: "factory",
    deptCode: "",
    permissionType: "permission",
  }).then((res) => {
    factoryOptions.value = res.data;
  });
}

function handleSearchListChange(type) {
  if (type == "factory") {
    depeIdSelectList({
      deptType: "station",
      deptCode: queryParams.value.factory,
      permissionType: "permission",
    }).then((res) => {
      workshopOptions.value = res.data;
      lineOptions.value = [];
      processOptions.value = [];
      queryParams.value.workshopCode = "";
      queryParams.value.productLine = "";
      queryParams.value.sectionCode = "";
    });
  }
  if (type == "workshopCode") {
    depeIdSelectList({
      deptType: "line",
      deptCode: queryParams.value.workshopCode,
      permissionType: "permission",
    }).then((res) => {
      lineOptions.value = res.data;
      processOptions.value = [];
      queryParams.value.productLine = "";
      queryParams.value.sectionCode = "";
    });
  }
  if (type == "productLine") {
    depeIdSelectList({
      deptType: "craft",
      deptCode: queryParams.value.productLine,
      permissionType: "permission",
    }).then((res) => {
      processOptions.value = res.data;
      queryParams.value.sectionCode = "";
    });
  }
}
// 查看生产中的交接班详情
function handleDetailing(row) {
  proxy.subPage(DetailData, {
    title: "接班详情",
    data: { ...row, parentType: "productingView" },
  });
}
// 查看已交班的交接班详情
function handleDetailhas(row) {
  proxy.subPage(DetailData, {
    title: "交接班详情",
    data: { ...row, parentType: "productedView" },
  });
}
// 新增接班
function handleSuccession() {
  proxy.subPage(SuccessionData, { title: "接班" }, () => {
    getList();
  });
}

// 编辑接班
function handleUpdate(row) {
  proxy.subPage(
    HandoverData,
    { title: "编辑接班信息", data: { ...row, parentType: "update" } },
    () => {
      getList();
    }
  );
}
// 交班
function handleHandover(row) {
  proxy.subPage(HandoverData, { title: "交班", data: { ...row, parentType: "handover" } }, () => {
    getList();
  });
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  queryParams.value.status = "";
  handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

function getUrlParams() {
  const url = window.location.href;
  const regex = /[?&]([^=#]+)=([^&#]*)/g;
  let params = {};
  let match;
  while ((match = regex.exec(url))) {
    params[decodeURIComponent(match[1])] = decodeURIComponent(match[2]);
  }
  return params;
}

getList();
getFactorys();
onMounted(async () => {
  let urlPad = getUrlParams();

  console.log(urlPad, "====urlPad");
  if (urlPad && urlPad.type) {
    proxy.subPage(SuccessionData, { title: "接班" }, () => {
      getList();
    });
  }
});
</script>
